<template>
  <div style="background-color:rgba(0,0,0,.5)">
    <vue-particles
      color="#dedede"
      :particle-opacity="0.7"
      :particles-number="80"
      shape-type="circle"
      :particle-size="4"
      lines-color="#dedede"
      :lines-width="1"
      :line-linked="true"
      :line-opacity="0.4"
      :lines-distance="150"
      :move-speed="3"
      :hover-effect="true"
      hover-mode="grab"
      :click-effect="true"
      click-mode="push"
    />
    <div class="read">
      <code>https://vue-particles.netlify.app/</code>
      <code>npm install vue-particles --save-dev</code>
      <pre>
      &lt;vue-particles
        color="#dedede"
        :particle-opacity="0.7"
        :particles-number="80"
        shape-type="circle"
        :particle-size="4"
        lines-color="#dedede"
        :lines-width="1"
        :line-linked="true"
        :line-opacity="0.4"
        :lines-distance="150"
        :move-speed="3"
        :hover-effect="true"
        hover-mode="grab"
        :click-effect="true"
        click-mode="push"
      /&gt;
    </pre>
      <div class="wrap-table"><h4 class="white text-left">
        Props
      </h4> <table class="rwd-table"><thead><tr><th>Name</th> <th>Type</th> <th>Default</th> <th>Description</th></tr></thead> <tr><td data-th="Name">color</td> <td data-th="Type">String</td> <td data-th="Default">#dedede</td> <td data-th="Description">Particle color</td></tr> <tr><td data-th="Name">particleOpacity</td> <td data-th="Type">Number</td> <td data-th="Default">0.7</td> <td data-th="Description">Particle opacity</td></tr> <tr><td data-th="Name">particlesNumber</td> <td data-th="Type">Number</td> <td data-th="Default">80</td> <td data-th="Description">Amount of particles</td></tr> <tr><td data-th="Name">shapeType</td> <td data-th="Type">String</td> <td data-th="Default">"circle"</td> <td data-th="Description">
        Available shape types: "circle","edge","triangle",
        "polygon","star"
      </td></tr> <tr><td data-th="Name">particleSize</td> <td data-th="Type">Number</td> <td data-th="Default">4</td> <td data-th="Description">
        Size of single particle
      </td></tr> <tr><td data-th="Name">linesColor</td> <td data-th="Type">String</td> <td data-th="Default">#dedede</td> <td data-th="Description">
        Lines color
      </td></tr> <tr><td data-th="Name">linesWidth</td> <td data-th="Type">Number</td> <td data-th="Default">1</td> <td data-th="Description">
        Lines width
      </td></tr> <tr><td data-th="Name">lineLinked</td> <td data-th="Type">Boolean</td> <td data-th="Default">true</td> <td data-th="Description">
        Enable lines
      </td></tr> <tr><td data-th="Name">lineOpacity</td> <td data-th="Type">Number</td> <td data-th="Default">0.4</td> <td data-th="Description">
        Line opacity
      </td></tr> <tr><td data-th="Name">linesDistance</td> <td data-th="Type">Number</td> <td data-th="Default">150</td> <td data-th="Description">
        Lines distance
      </td></tr> <tr><td data-th="Name">moveSpeed</td> <td data-th="Type">Number</td> <td data-th="Default">3</td> <td data-th="Description">
        Particles speed
      </td></tr> <tr><td data-th="Name">hoverEffect</td> <td data-th="Type">Boolean</td> <td data-th="Default">true</td> <td data-th="Description">
        Enable hover effect
      </td></tr> <tr><td data-th="Name">hoverMode</td> <td data-th="Type">String</td> <td data-th="Default">grab</td> <td data-th="Description">
        Available hover modes:
        "grab", "repulse", "bubble"
      </td></tr> <tr><td data-th="Name">clickEffect</td> <td data-th="Type">Boolean</td> <td data-th="Default">true</td> <td data-th="Description">
        Enable click effect
      </td></tr> <tr><td data-th="Name">clickMode</td> <td data-th="Type">String</td> <td data-th="Default">push</td> <td data-th="Description">
        Available click modes:
        "push", "remove", "repulse", "bubble"
      </td></tr></table></div>

    </div>

  </div>
</template>
<script>
// https://vue-particles.netlify.app/
import VueParticles from 'vue-particles/src/vue-particles/vue-particles'
export default {
  components: { VueParticles }

}
</script>
<style lang="css" scoped>
  .read{
    position: absolute;left: 0;top: 0;padding: 20px;
  }
</style>
